<template>
    <div>
        {{ route.query.id }}<br>
        {{ route.query.name }}<br>
        <el-button @click="">{{  }}</el-button>
<el-button @click="changePrice">{{ Price }}</el-button>
        <child a="我要传给我儿子" b="bb" :age="age"></child>
    </div>
</template>
<script setup>
    import { computed } from 'vue';
import { reactive } from 'vue';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import child from '@/components/loadingtest/l11.vue'
const age= ref(18)
    const route = useRoute()
    const minPrice = ref(520)
    const maxPrice = ref(300)
    const Price = computed({//computed计算属性计算出来的是ref
        get(){
            return minPrice.value+maxPrice.value
        },
        set(val){//set方法需要把get中return中要用的变量赋值
            minPrice.value = val.min;//reactive的话可以直接.属性，ref的话先.value在.属性
            maxPrice.value = val.max;
        }
    })
    const value = reactive({min:600,max:700})
    const changePrice = ()=>{
        Price.value = value
    }
</script>

<style scoped>

</style>